<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入搜索的内容" id="debounce" autofocus /> 
    <script>
    window.onload = function() {
        let t = 2000;
        let t1 = + new Date(); // 1970 毫秒数  日期对象 类型转换
        const input = document.getElementById('debounce');
        // const ajax = (event) => {    
        //     let keyword = event.target.value;
        //     console.log(keyword);
        //     let t2 = + new Date();
        //     // 2  执行1次 console.
        //     if (t2 - t1 > t) {
        //         console.log('------------------------')
        //         t1 = t2
        //     }
        //     // console.log(t2-t1);
        //     // console.log(+ new Date());
        // }
        // 回调函数？ 
        // 1. keyup 在一开始就声明  放到事件池子里面 event loop 
        // 2. 事件处理函数是在事件发生时触发并执行 
        // 3. 异步? 回到event 池子里找出事件处理函数调用执行
        // 单位时间里如何减少执行次数
        
        // 自动转变成整数类型
        // debounceAjax 是 debounce 的执行结果
        // debounce 结果是一个函数 
        // 函数 , 该干嘛干嘛
        const ajax = (event) =>{
            console.log('搜索',event.target.value)
        }
        const debounce = (cb,t)=>{
            return cb;
        }
        const debounceAjax = debounce(ajax, t);
        // 事件 第二个参数 一定是函数
        input.addEventListener('keyup', debounceAjax);
    }
    </script>
</body>
</html>